<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img class="w-full md:min-h-[300px] min-h-[350px] object-cover relative z-0" src="assets/imgs/sustainability.jpg" alt="">
      <app-slide-text url="/sustainability">
        <h2 style="color: #F44335">Sustainability</h2>
        <h4>Helping business meet their sustainability goals and requirements.</h4>
      </app-slide-text>
    </div>
    <div class="swiper-slide">
      <img class="w-full md:min-h-[300px] min-h-[350px] object-cover" src="assets/imgs/energyefficiency.jpg" alt="">
      <app-slide-text url="/energy">
        <h2 style="color: #fb8c00">Energy Efficiency</h2>
        <h4>Transitioning your real estate asset to a cleaner, decarbonized model.</h4>
      </app-slide-text>
    </div>
    <div class="swiper-slide">
      <img class="w-full md:min-h-[300px] min-h-[350px] object-cover" src="assets/imgs/healthybuildings.jpg" alt="">
      <app-slide-text url="/air">
        <h2 style="color: #F44335">Healthy Offices</h2>
        <h4>Providing healthy air quality and comfortable spaces for your occupants.</h4>
      </app-slide-text>
    </div>
  </div>

  <!-- 如果需要导航按钮 -->
  <div class="swiper-button-prev prev-btn"><img src="assets/imgs/prev.svg" class="w-8 h-8" alt=""></div>
  <div class="swiper-button-next next-btn"><img src="assets/imgs/next.svg" class="w-8 h-8" alt=""></div>
</div>
<div class="relative mt-[32px] z-50">
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination translate-y-[-10px]"></div>
</div>

<app-page-box class="relative z-40">

  <div class="grid lg:grid-cols-3 text-center">
    <app-index-part1 dataid="efficient" [count]="70">
      <h5>Non Efficient Buildings</h5>
      <p>70% of buildings are using non-efficient or obsolete lighting and HVAC systems</p>
    </app-index-part1>

    <app-index-part1 dataid="energy" [count]="75">
      <h5>Energy Use</h5>
      <p>75% of energy used in buildings is lighting or HVAC</p>
    </app-index-part1>

    <app-index-part1 dataid="healthy" [showhr]="false" [count]="80">
      <h5>Healthy Buildings</h5>
      <p>Over 80% of buildings have Indoor Air Quality levels that are below WHO standards</p>
    </app-index-part1>
  </div>

  <app-grid-7-5 class="block p-4">
    <app-index-part1 dataid="wasted" [showhr]="false" [count]="75" h1class="text-3xl" h5class="text-3xl" pclass="text-md">
      % of Energy used in buildings is HVAC and lighting
      <h5 style="margin-top: -0.5rem">A lot of it is wasted</h5>
      <p>HVAC and Lighting account for approximately 75% of energy consumption both in commercial and residential buildings. A lot of this electricity could be saved by optimizing the use of lights,
        ventilation and air conditioning systems. Nevegy systems use IoT, smart technology with sensors to understand all aspects of illumination, thermal comfort and presence to maximize energy
        savings, paving your road to sustainability and important economic savings and CO2 footprint reduction.</p>
    </app-index-part1>
    <img src="assets/imgs/light_elec.png" alt="">
  </app-grid-7-5>

  <app-gray-box>
    <h2 class="text-4xl leading-tight mb-2">Time to Act</h2>
    <p class="font-normal text-xl leading-relaxed mb-4 text-neutral-500">Buildings are extremely energy inefficient, and most don't provide healthy working environments to occupants.</p>
    <p class="font-normal text-base leading-relaxed mb-4 text-neutral-500">Nevegy helps you create sustainable and energy efficient buildings while ensuring healthy indoor spaces.</p>
    <a href="https://www.eia.gov/consumption/commercial/" class="inline-block text-white bg-pink rounded-lg px-7 py-3 hover:shadow-xl shadow-rose-600 transition-all duration-150 ease-in">
      See 2018 CBECS Building Survey</a>
  </app-gray-box>

  <div>
    <app-line-gradient-box class="my-4 text-white font-semibold text-3xl leading-snug">
      <p class="px-4">Add value to your spaces, as an occupant or as an owner.</p>
    </app-line-gradient-box>
  </div>

  <div class="my-4 grid xl:grid-cols-2 gap-4">
    <app-line-gradient-box class="h-full">
      <div class="pl-4 text-white">
        <h5 class="text-xl mb-2 flex items-center"><i class="bi bi-people-fill text-orange-400 text-3xl mr-2"></i><span>Occupant</span></h5>
        <p class="leading-relaxed mb-4 lg:pl-10">As a tenant or occupant, Nevegy technology will help you improve your facilities in many ways:</p>
        <ul class="list-disc pl-8 mb-4 lg:pl-14">
          <li>Improved transparency and overall comfort</li>
          <li>Real time metrics of air quality</li>
          <li>Real time metrics of occupancy</li>
          <li>Improved employee loyalty</li>
          <li>Improved talent retention</li>
          <li>Improved talent acquisition</li>
          <li>Increase team performance</li>
          <li>Reduced energy use</li>
          <li>Improved ESG scores</li>
        </ul>
      </div>
    </app-line-gradient-box>
    <app-line-gradient-box class="h-full">
      <div class="pl-4 text-white">
        <h5 class="text-xl mb-2 flex items-center"><i class="bi bi-buildings-fill text-orange-400 text-3xl mr-2"></i><span>Owner</span></h5>
        <p class="leading-relaxed mb-4 lg:pl-10">As a real estate asset owner, Nevegy technology will help you improve your asset in many areas:</p>
        <ul class="list-disc pl-8 mb-4 lg:pl-14">
          <li>Improved rental rates</li>
          <li>Improved occupation rates</li>
          <li>Improved talent acquisition and retention</li>
          <li>Improved conversion rates</li>
          <li>Reduced infrastructure costs</li>
          <li>Reduced maintenance costs</li>
          <li>Reduced energy demand</li>
          <li>Improved life span of equipment</li>
          <li>Longer maintenance cycles and consumable lifetime</li>
          <li>Improved ESG scores</li>
        </ul>
      </div>
    </app-line-gradient-box>
  </div>

  <div>
    <app-line-gradient-box class="text-white" [bg]="GlobalService.bgOrange">
      <div class="grid grid-cols-12 p-8">
        <h1 class="sm:text-5xl text-xl leading-tight mb-2 col-span-10">Simple, Inexpensive, Effective</h1>
        <p class="font-normal leading-relaxed text-xl opacity-80 mb-4 col-span-10">Complete sensing, automation and energy savings step-by-step implementation. Minimum-to-no changes to current infrastructure.
          Quick implementation and ROI in months. Self adjusting and
          learning to achieve significant energy savings while maintaining and improving indoor comfort.</p>
      </div>
    </app-line-gradient-box>
  </div>

  <div class="grid grid-cols-12 gap-4 py-12 my-4 items-center">

    <div class="lg:col-start-2 lg:col-span-4 col-start-2 col-span-10" id="rotate">
      <div class="relative transition-all duration-[0.8s] ease-in-out" style="transform-style: preserve-3d;">
        <div class="front w-full bg-white bg-cover relative top-0 left-0 z-10 m-auto"
             style="width: 93.8%;background-image: url(https://images.unsplash.com/photo-1569683795645-b62e50fbf103?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80);">
          <div class="text-center text-white flex items-center justify-center flex-col py-[5.45rem] px-4 h-full relative z-10">
            <i class="bi-mouse-fill sm:text-[2rem] my-4"></i>
            <h3 class=" sm:text-3xl leading-snug mb-2">Total<br>Control</h3>
            <p class="opacity-80 leading-relaxed font-normal mb-4">Gain complete control and visibility over your enterprise infrastructure.</p>
          </div>
        </div>
        <div class="back w-full bg-white bg-cover absolute top-0 left-0 h-full z-20 m-auto"
             style="width: 93.8%;transform: rotateY(180deg);background-image: url(https://images.unsplash.com/photo-1498889444388-e67ea62c464b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1365&q=80);">
          <div class="text-center text-white flex items-center justify-center flex-col py-[5.45rem] px-4 h-full relative z-10">
            <h3 class=" leading-snug sm:text-3xl mb-2">Discover More</h3>
            <p class="leading-relaxed opacity-80 sm:mb-4 mb-1">Find out how to configure, visualize and start saving on lighting and HVAC with minimal investment.</p>
            <a href="https://www.nevegy.com/ppt/index.html" target="_blank" class="my-4 py-2 px-4 text-xs bg-white rounded-lg text-zinc-950 w-6/12">Show Me!</a>
          </div>
        </div>
      </div>
    </div>

    <div class="lg:col-start-7 lg:col-span-6 col-start-2 col-span-10 grid sm:grid-cols-2 sm:grid-rows-2 gap-2">
      <div>
        <h5 class="font-bold mt-4 text-xl leading-snug mb-2 text-zinc-800 flex items-center"><i class="bi bi-clipboard-check text-3xl mr-2"></i><span>Define</span></h5>
        <p class="pr-12 mb-4 leading-relaxed text-neutral-500">Define how you want your environment to operate by creating zones that are independently managed and automatically controlled.</p>
      </div>
      <div>
        <h5 class="font-bold mt-4 text-xl leading-snug mb-2 text-zinc-800 flex items-center"><i class="bi bi-search text-3xl mr-2"></i><span>Visualize</span></h5>
        <p class="pr-12 mb-4 leading-relaxed text-neutral-500">Visualize and manage your infrastructure at any time, from anywhere and be proactively informed of any issues or requests .</p>
      </div>
      <div>
        <h5 class="font-bold mt-4 text-xl leading-snug mb-2 text-zinc-800 flex items-center"><i class="bi bi-journal-check text-3xl mr-2"></i><span>Learn</span></h5>
        <p class="pr-12 mb-4 leading-relaxed text-neutral-500">The system learns and adapts to the users and environment, presence, luminosity and preferences are automatically used to provide best
          environment.</p>
      </div>
      <div>
        <h5 class="font-bold mt-4 text-xl leading-snug mb-2 text-zinc-800 flex items-center"><i class="bi bi-cash-coin text-3xl mr-2"></i><span>Save</span></h5>
        <p class="pr-12 mb-4 leading-relaxed text-neutral-500">All parameters are taken into account to provide perfect lighting while saving electricity and achieving your ESG targets.</p>
      </div>
    </div>
  </div>

  <app-grid-7-5>
    <app-index-part1 dataid="realTime" [showhr]="false" [count]="0" h1class="text-3xl" h5class="text-3xl" pclass="text-md">
      Real time information
      <h5 style="margin-top: -0.5rem">Want to see how?</h5>
      <p>mplementing energy savings requires having real time information about the changes and the impact of those changes in building performance, equipment status, energy consumption per occupant
        and area, etc. Nevegy provides real time ESG reports (Energy) and allows you to see how each and every implementation step affects your energy consumption and equipment performance.</p>
    </app-index-part1>

    <img src="assets/imgs/esg-report.jpg" alt="">
  </app-grid-7-5>

  <app-gray-box>
    <span class="inline-block text-white text-xs uppercase bg-pink rounded-lg px-3 py-2 mb-4 hover:shadow-xl shadow-rose-600 transition-all duration-150 ease-in">Powerful Automation</span>
    <h2 class=" text-4xl leading-tight mb-2">Beyond Office Use</h2>
    <p class="font-normal text-xl leading-relaxed mb-4 text-neutral-500 grid grid-cols-12">
      <span class="col-start-4 col-span-6">Nevegy solutions, zoning and grouping will help you automate lighting and HVAC for many scenarios, including offices, common
      areas like stairwells or corridors, parking lots, factories, airports, etc. You will be able to configure different behaviors for different time frames and different situations including
      external conditions, presence, movement, etc.</span>
    </p>
  </app-gray-box>

  <div>
    <app-line-gradient-box class="block my-4 text-white" [bg]="GlobalService.bgGreen">
      <div class="grid grid-cols-12 p-6">
        <h3 class=" text-3xl leading-snug mb-4 col-span-10">Why Nevegy?</h3>
        <div class="sm:ml-12 col-span-10">
          <h4 class=" text-2xl leading-snug mb-2">We set in this adventure with a simple goal in mind</h4>
          <h1 class=" text-5xl leading-tight mb-2">Push for a better, greener world</h1>
          <p class="leading-relaxed text-xl opacity-80 mb-4">Nevegy's team mission is to address the need to reduce energy consumption worldwide, reduce dependance on fossil fuels, reduce carbon
            emissions and in the short term, enjoy a world where
            we can enjoy clean, non-polluted air. Implementing Nevegy's inexpensive solutions will help us achieve this goal.</p>
        </div>
      </div>
    </app-line-gradient-box>
  </div>

  <app-contact-us></app-contact-us>

</app-page-box>
